import React, {FC, useCallback, useContext, useMemo} from 'react';
import "./index.less";
import {FormattedMessage, Link, SelectLang, useModel, history} from "umi";
import {Avatar, Button, Dropdown} from "antd";
import {LogoutOutlined, UserOutlined} from "@ant-design/icons";
import type {MenuInfo} from 'rc-menu/lib/interface';
import {clearAuthInfo} from "@/utils/auth";
import querystring from 'query-string';
import {DEFAULT_LOGIN_PATH as LOGIN_PATH} from "@kf-web-library/utils/es/constants";
import {DEFAULT_REGISTER_PATH as REGISTER_PATH} from "@kf-web-library/utils/es/constants";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {useLocation} from "@@/exports";
import useBreakpoint from "antd/es/grid/hooks/useBreakpoint";

interface HeaderUserContainerProps {
}


/**
 * 退出登录，并且将当前的 url 保存
 */
const loginOut = async () => {
  clearAuthInfo();
};

/**
 * 头部用户容器
 */
const HeaderUserContainer: FC<HeaderUserContainerProps> = (props) => {
  const {currentUserInfo: userInfo, logout, authedRedirect} = useContext(HxConfigContext);
  const screens = useBreakpoint();
  const isMobile = !(screens.lg || screens.xxl || screens.xl);

  const userMenus = useMemo(() => {
    return [
      {
        key: 'loginUserSetting',
        icon: <UserOutlined/>,
        label: <FormattedMessage id="menu.mine"/>,
      },
      {
        key: 'logout',
        icon: <LogoutOutlined/>,
        label: <FormattedMessage id="text.logout"/>,
      },
    ]
  }, []);

  const onUserMenuClick = useCallback((event: MenuInfo) => {
    const {key} = event;
    if (key === 'loginUserSetting') {
      history.push({
        pathname: "/mine/favorite",
      });
      //setLoginUserSettingModalOpen(true);
    } else if (key === 'logout') {
      logout?.();
    }
  }, []);


  return (
    <div className={"hxiw-hearer-user-container"}>
      {
        !!userInfo ? (
          <Dropdown menu={{items: userMenus, onClick: onUserMenuClick}} trigger={["click"]}>
            <span className={"hxiw-loginuser-an"}>
                <a className={'hxiw-loginuser-an-name'}>{userInfo?.nickname}</a>
               <Avatar className={'hxiw-loginuser-an-avatar'} icon={<UserOutlined/>} size={34} src={userInfo?.avatar} draggable={false}/>
            </span>
          </Dropdown>
        ) : (
          isMobile ? null : (
            <>
              <Link
                to={{
                  pathname: LOGIN_PATH,
                  search: authedRedirect ? querystring.stringify({redirect: authedRedirect}) : "",
                }}
                className={"aside-btn"}
              >
                <Button type={location.pathname === LOGIN_PATH ? "primary" : "text"}><FormattedMessage id="text.login"/></Button>
              </Link>
              <Link
                to={{
                  pathname: REGISTER_PATH,
                  search: authedRedirect ? querystring.stringify({redirect: authedRedirect}) : "",
                }}
                className={"aside-btn"}
              >
                <Button type={location.pathname === REGISTER_PATH ? "primary" : "text"}><FormattedMessage id="text.register"/></Button>
              </Link>
            </>
          )
        )
      }
      <SelectLang/>
    </div>
  );
};

export default HeaderUserContainer;
